<template>
  <div class="page">
    <headerbar>
      <span v-html="typeShow"></span>
      <!--<span v-if="data.status==='2' && data.editPower" @click="go()" class="head-btn" slot="btn">添加会议纪要</span>-->
      <span v-if="data.editPower" @click="goQrcode()" class="head-btn" slot="btn"><img src="../../../../static/images/duihuanjilu.png" alt="">二维码</span>
    </headerbar>
    <section class="inner-content">
      <div class="avatar-wrap">
        <div class="cont">
          <div class="title">{{data.theme}}</div>
          <div class="text">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：<span v-html="typeShow">{{typeShow}}</span></div>
          <div class="text">发&nbsp;&nbsp;起&nbsp;&nbsp;人：{{data.hoster}}</div>
          <div class="text">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：{{data.address}}</div>
          <div class="text">开始时间：{{data.startTime}}</div>
        </div>
      </div>

      <ul class="line-tab">
        <li @click="loadData()" :class="{'active':tabIndex==0}"><span>基本信息</span></li>
        <li @click="loadParticipateUserList()" :class="{'active':tabIndex==1}"><span>参加人员</span></li>
        <!--<li @click="loadNoticeList()" :class="{'active':tabIndex==2}"><span>通知信息</span></li>-->
        <li @click="loadAnnexList()" :class="{'active':tabIndex==3}"><span>有关资料</span></li>
      </ul>
      <!--会议内容-->
      <section v-if="tabIndex==0">
        <div class="text-block" v-if="false">
          <div class="name">范围：</div>
          <div class="value">支部</div>
        </div>
        <div v-if="false" class="text-block">
          <div class="name">主题：</div>
          <div class="value" v-align="'text-left'">{{data.theme}}</div>
        </div>
        <div v-if="false" class="text-block">
          <div class="name">会议开始时间：</div>
          <div class="value">{{data.startTime}}</div>
        </div>
        <div v-if="false" class="text-block">
          <div class="name">会议地点：</div>
          <div class="value" v-align="'text-left'">{{data.address}}</div>
        </div>
        <div class="text-block">
          <div class="name">主持人：</div>
          <div class="value">{{data.hoster}}</div>
        </div>
        <div v-if="false" class="text-block">
          <div class="name">记录人：</div>
          <div class="value" v-align="'text-left'">{{data.recorder}}</div>
        </div>
        <div class="text-block">
          <div class="name">议&nbsp;&nbsp;&nbsp;&nbsp;程：</div>
          <div class="value">{{data.ext.agenda}}</div>

        </div>
        <div class="text-block" v-if="data.status !== '3'">
          <div class="name">会后5个工作日内需添加图片等资料会议才有效</div>
        </div>

        <div v-if="false" class="pdv-2"></div>
        <ul v-if="false" class="list-download">
          <li class="item" v-for="(data,index) in attachmentList" :key="data.id">
            <div class="inner">
              <div class="bd">
                <div class="title">{{data.fileName}}</div>
                <div v-if="downloadFlag" class="tip">下载中...</div>
              </div>
              <div class="ft">
                <div v-if="isImage(data.fileName)" class="btn-line pull-right" @click="imgView(data)">查看</div>
                <div v-if="!isImage(data.fileName)" class="btn-line pull-right" @click="download(data)">下载</div>
              </div>
            </div>
          </li>
        </ul>

        <div class="text-block">
          <div class="name">图&nbsp;&nbsp;&nbsp;&nbsp;片：</div>
          <div class="imgs" v-saveImage>
            <div class="img" v-for="(item,i) in imgAttachmentList"><img :src="tools.getImgUrl(item.fileId)" @click="showImagePreview(item.fileId)"></div>
          </div>
        </div>
        <div v-if="total" class="text-block">
          <div class="name"><img class="danger" src="../../../../static/images/danger.png" alt=""></div>
          <div class="value">会议签到人数不足50%，不能添加会议资料，将作为<span class="red">无效会议</span>。</div>
        </div>
        <div v-if="total" class="default-block-btn default-block-btn-no mgh-10">添加会议资料</div>
        <div v-if="data.status==='2' && data.editPower" @click="go()" class="default-block-btn mgh-10">添加会议资料</div>
      </section>

      <!--会议人员-->
      <section class="people-list" v-if="tabIndex==1">
        <div class="people-item" v-for="(data,index) in userList" :key="data.id">
          <div class="avatar-img">
            <img v-if="!data.imageUrl || data.imageUrl === ''" src="../../../../static/images/default.jpg" alt="">
            <img v-if="data.imageUrl !== ''" :src="showImg(data.imageUrl)" alt="">
          </div>
          <span class="name">{{data.userName}}</span>
          <span v-if="editPower && data.signFlagName==='待签到'" class="tip notip" @click="showType(data.id)">{{data.signFlagName}}</span>
          <span v-if="!(editPower && data.signFlagName==='待签到')" class="tip">{{data.signFlagName}}</span>
          <span class="" @click="callNumber(data.mobile)"><span class="color-tip fa fa-phone-alt"></span><span class="tip pdh-2">{{data.mobile}}</span>
          </span>
        </div>
      </section>

      <!--通知信息-->
      <section class="people-list people-list-msg" v-if="tabIndex==2">
        <div class="people-item" v-for="(data,index) in nodeMsgLists" :key="data.id">
          <div class="avatar-img">
            <img v-if="!data.imageUrl || data.imageUrl === ''" src="../../../../static/images/default.jpg" alt="">
            <img v-if="data.imageUrl !== ''" :src="showImg(data.imageUrl)" alt="">
          </div>
          <span class="name">{{data.userName}}</span>
          <span class="tip pdh-2">{{data.readResult}}</span>
          <span class="tip pdh-2">{{data.feedResult}}</span>
        </div>
      </section>

      <!--签到信息-->
      <section v-if="tabIndex==2 && data.status==='0' && false">
        <div class="start-meeting-btn">会议未开始</div>
      </section>
      <section v-if="tabIndex==2 && data.status==='1' && false">
        <div @click="mettingSign()" class="start-meeting-btn">签到</div>
      </section>

      <!--结束签到-->
      <section class="text-center" v-if="tabIndex==2 && false">
        <img class="qr-code" src="../../../../static/images/zzsh_ewm.jpg" alt="">
        <div class="default-block-btn">结束签到</div>
      </section>

      <!--文档-->
      <section v-if="tabIndex==3">
        <ul class="list-download">
          <li class="item" v-for="(data,index) in attachments" :key="data.id">
            <div class="inner">
              <div class="bd">
                <div class="title">{{data.fileName}}</div>
                <div v-if="downloadFlag" class="tip">下载中...</div>
              </div>
              <div class="ft">
                <div class="btn-line pull-right" @click="download(data)">下载</div>
                <!--<div v-if="isImage(data.fileName)" class="btn-line pull-right" style="margin-right: 10px" @click="showImagePreview(data.fileId)">预览</div>-->
              </div>
            </div>
          </li>
        </ul>
        <div class="text-center no-data" v-if="attachmentList.length===0">
          <img src="../../../../static/images/no_data.png" alt="">
          <p>暂无数据</p>
        </div>
      </section>

    </section>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        objectsName: '',
        data: [],
        infinite: true,
        tabIndex: 0,
        userList: [],
        attachmentList: [],
        imgAttachmentList: [],
        attachments: [],
        orgLifeId: '',
        downloadFlag: false,
        itemIndex: -1,
        title: '',
        nodeMsgLists: [],
        feedTypes: [],
        editPower: false,
        hasShyk: false, // 是否包含三会一课
        typeShow: '', // 类型显示
        total: true // 参会人数不足
      }
    },
    created () {
      this.orgLifeId = this.$route.params.orgLifeId
      this.loadData()
      this.loadImgList()
    },
    // mounted () {
    //   window.returnScanResult = (v) => {
    //     this.returnScanResult(v)
    //   }
    // },
    methods: {
      loadData () {
        this.data = {}
        this.tabIndex = 0
        let data = {
          loginId: '3750',
          orgLifeId: this.orgLifeId
        }
        loginService.orgLifeDetail(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.data = res.data
          this.typeShow = ''//重置清单
          if (this.data.type.includes('shyk')) {
            this.hasShyk = true
            this.typeShow = this.data.subTypeName
          }
          if (this.data.type.includes('ztdr')) {
            this.typeShow = this.typeShow + ' &nbsp;-&nbsp;  主题党日'
          }
          if (this.data.type.includes('mzpy')) {
            this.typeShow = this.typeShow + '&nbsp;-&nbsp;   民主评议'
          }
          this.editPower = this.data.editPower
          if (this.data.type === 'shyk') {
            this.title = '三会一课'
          } else if (this.data.type === 'ztdr') {
            this.title = '主题党日'
          } else if (this.data.type === 'mzpy') {
            this.title = '民主评议'
          }
        })
      },
      loadParticipateUserList () {
        this.findDictList()
        this.tabIndex = 1
        let data = {
          loginId: '3750',
          orgInfoId: this.orgLifeId
        }
        loginService.participateUserList(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.userList = res.data
        })
      },
      loadNoticeList () {
        this.tabIndex = 2
        let data = {
          loginId: '112029',
          orgLifeId: this.orgLifeId
        }
        loginService.nodeMsgList(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.nodeMsgLists = res.data
        })
      },
      loadAnnexList () {
       this.tabIndex = 3
        let data = {
          loginId: '3750',
          orgInfoId: this.orgLifeId
        }
        loginService.annexList(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          let attachmentList = res.data
          this.attachments = []
          attachmentList.map((v) => {
            if (!this.isImage(v.fileName)) {
              this.attachments.push(v)
            }
          })
        })
      },
      loadImgList () { // 基本信息图片列表
        let data = {
          loginId: '3750',
          orgInfoId: this.orgLifeId
        }
        loginService.annexList(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.attachmentList = res.data
          this.attachmentList.map((v) => {
            if (this.isImage(v.fileName)) {
              this.imgAttachmentList.push(v)
            }
          })
        })
      },
      getStatus (status) {
        if (status === '0') {
          return '未开始'
        } else if (status === '1') {
          return '进行中'
        } else if (status === '2') {
          return '已结束未登记'
        } else if (status === '3') {
          return '已登记'
        }
      },
      download (item) {
        console.log('item={}', item)
        let url = this.tools.getImgUrl(item.fileId)
        let fileName = item.fileName
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(url, fileName)
        }
      },
      mettingSign () {
        let data = {
          loginId: '3750',
          orgInfoId: this.orgLifeId
        }
        loginService.sign(data).then((res) => {
          return tools.tip(res.message)
        })
      },
      go () {
        let data = {
          orgInfoId: this.orgLifeId
        }
        loginService.verifySignInRate(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.$router.push({path: `/meetingMinutes/${this.orgLifeId}`})
        })
      },
      goQrcode () {
        this.$router.push({path: `/qrcode/${this.orgLifeId}`})
      },
      callNumber (mobile) {
        if (this.data.mobile === '') {
          return
        }
        if (window.android && window.android.callNumber) {
          window.android.callNumber(mobile)
        }
      },
      isImage (fileName) {
        let extName = fileName.split('.').pop().toLowerCase()
        return 'jpg,png,gif,jpeg,bmp'.split(',').indexOf(extName) >= 0
      },
      imgView (data) {
        let imgs = [this.showImg(data.fileId)]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      showImg (fileId) {
        let fileUrl = this.tools.getImgUrl(fileId)
        console.log('-------------fileUrl=', fileUrl)
        return fileUrl
      },
      showAlert (data) {
        this.dialog = this.$createDialog({
          type: 'prompt',
          title: '确认手动签到',
          prompt: {
            value: '',
            placeholder: '原因'
          },
          onConfirm: (e, promptValue) => {
            this.submitComment(data, promptValue, '2')
            console.log('this.comment=', this.comment)
          }
        }).show()
      },
      // 选择反馈类型
      showType (id) {
        this.$createActionSheet({
          title: '手动签到',
          active: 10,
          data: this.feedTypes,
          onSelect: (item, index) => {
            this.sureDialog(item.scope, id)
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      findDictList () {
        this.feedTypes = []
        let data = {
          loginId: '3750',
          dictType: 'org_life_sign_casetype'
        }
        this.fetchService.findDictList(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          res.data.map((v) => {
            let types = {
              scope: v.value,
              content: v.label
            }
            this.feedTypes.push(types)
          })
          console.log('-------------feedTypes=', this.feedTypes)
        })
      },
      manualSign (caseType, id) {
        let data = {
          orgLifeId: this.orgLifeId,
          caseType: caseType,
          signId: id
        }
        this.fetchService.manualSign(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          tools.tip(res.message)
          this.loadParticipateUserList()
        })
      },
      sureDialog (scope, id) {
        let _this = this
        this.$createDialog({
          type: 'confirm',
          icon: '',
          title: '温馨提示',
          content: '确认手动签到吗？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            this.manualSign(scope, id)
          },
          onCancel: () => {
          }
        }).show()
      },
      showImagePreview (fileId) {
        if (fileId.length < 1) {
          return false
        }
        let fileUrl = this.tools.getImgUrl(fileId)
        let imgs = [fileUrl]
        let me = this
        let instance = this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs,
          onHide: () => {
            me.tools.dialog(-1)
            me.tools.dialogDestroy()
          }
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
        instance.back = instance.hide
        me.tools.dialog(1, instance)
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
.line-tab {
  li {
    width:25%;
    flex-shrink: 0;
  }
}
.ft {
  margin-top:20px;
}
  .people-list {
    .people-item {
      .name {
        width:3em;
        white-space:nowrap;
        flex-shrink: 0;
        text-align: center;
      }
      .tip {
        width:25%;
        flex-shrink: 0;
        text-align: center;
      }
      .notip {
        color: #E20002;
      }
    }
  }
  .people-list.people-list-msg {
    .people-item {
      .tip {
        width:25%;
        flex-shrink: 0;
        text-align: center;
      }
    }
  }
.imgs {
  width: 100%;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-left: pxToRem(20px);
  .img {
    width:28%;
    height: 200px;
    flex-shrink: 0;
    font-size:0;
    margin-right: 3%;
    margin-bottom: 3%;
    overflow: hidden;
    position: relative;
    img {
      position: absolute;
      top:50%;
      left:0;
      transform: translateY(-50%);
      width:100%;
      height:auto;
    }
  }

}
.cont-text {
  word-break: break-all;
  padding:0 40px;
  padding-bottom:20px;
}
.avatar-wrap {
  height:pxToRem(240px);
  width:100%;
  border-radius:pxToRem(10px);
  overflow: hidden;
  background:url('../../../../static/images/detail_bg.png') no-repeat center;
  background-size: 100% auto;
  padding: pxToRem(27px) pxToRem(38px);
  .cont {
    width: 100%;
    margin: 0;
    .title {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      margin-bottom: pxToRem(5px);
    }
  }
}
.line-tab {
  padding: 0;
  border-bottom: 1px solid #E5E5E5;
  li {
    font-weight: bold;
    width: initial;
    &.active {
      padding-bottom: pxToRem(10px);
      color: #e20001;
      border-bottom: 3px solid #e20001;
    }
    span {
      font-weight: bold;
      border: 0;
    }
  }
}
.text-block {
  color: #666666;
  border: 0;
  padding: pxToRem(22px) pxToRem(22px) 0;
  .value {
    text-align: left;
  }
  .danger {
    width: pxToRem(38px);
  }
  .red {
    color: #E20002;
  }
}
.head-btn {
  img {
    width: 25px;
    vertical-align: middle;
    margin-right: 5px;
  }
}
.default-block-btn-no {
  background: #C5C5C5;
  box-shadow: none;
}
</style>
